<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="js/Cesium/Widgets/widgets.css" />
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/Cesium/Cesium.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#contanter{
				width:100%;
				height:100%
			}    
			/* 去除logo信息 */	
			.cesium-widget-credits{ 
				display:none!important; 
				visibility:hide!important; 
			} 
			/* 添加点、线、面的按钮*/
			.addEntities{
				position: fixed;
				left: 110px;
				top: 10px;
				z-index: 99999;
			}
			button{
				background-color: rgba(47,53,60,0.8);
				color: #FFFFFF;
				border: 0;
				padding: 5px 15px;
				border-radius: 5px;
			}
		</style>
    </head>
    <body>
		<div id="contanter"></div>
			<!-- 添加实体 -->
		<div class="addEntities">
			<button onclick="startA()">开始</button>
			<button onclick="stopA()">结束</button>
			<button onclick="startA()">继续</button>
			<button onclick="goA()">前进</button>
			<button onclick="backA()">倒退</button>
		</div>
		<script>
			var viewer = new Cesium.Viewer("contanter",{
					animation: false,  //是否显示动画控件
		            baseLayerPicker: false, //是否显示图层选择控件
		            geocoder: true, //是否显示地名查找控件
		            timeline: false, //是否显示时间线控件
		            sceneModePicker: true, //是否显示投影方式控件
		            navigationHelpButton: false, //是否显示帮助信息控件
		            infoBox: true,  //是否显示点击要素之后显示的信息
					// shouldAnimate: true
				})
				// 设置大气
				// viewer.scene.skyAtmosphere.show = false
				// 设置太阳
				viewer.scene.sun.show = true
				
				// 设置月亮
				viewer.scene.moon.show = true
				viewer.scene.globe.enableLighting = true;
				
				// viewer.camera.setView({
				// 	position:new Cesium.Cartesian3(-4619099.162889577, 8702564.346157411, 2780889.40970079),
				// 	orientation:{
				// 		heading:5.6006558626495915,
				// 		pitch:-1.2728070624513346,
				// 		roll:0.0559690534968178
				// 	}
				// })
				
				let data = [];
				data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:0, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];
				data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];
				data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:36.660972, height:0, time:360}];
				// 起始时间
				let start = Cesium.JulianDate.fromDate(new Date(2017,7,11));
				// 结束时间
				let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
				 
				// 设置始时钟始时间
				viewer.clock.startTime = start.clone();
				// 设置时钟当前时间
				viewer.clock.currentTime = start.clone();
				// 设置始终停止时间
				viewer.clock.stopTime  = stop.clone();
				// 时间速率，数字越大时间过的越快
				viewer.clock.multiplier = 10;
				// 时间轴
				// viewer.timeline.zoomTo(start,stop);
				// 循环执行,即为2，到达终止时间，重新从起点时间开始
				viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

				for(let j=0; j<data.length; j++){
					let property = computeFlight(data[j]);
					//console.log(property)
					// 添加模型
					let planeModel = viewer.entities.add({
						// 和时间轴关联
						availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
							start : start,
							stop : stop
						})]),
						position: property,
						// 根据所提供的速度计算模型的朝向
						orientation: new Cesium.VelocityOrientationProperty(property),
						// 模型数据
						model: {
							uri: './data/SampleData/models/CesiumAir/Cesium_Air.glb',
							minimumPixelSize:128
						}
					});
					
				}
				/**
				 * 计算飞行
				 * @param source 数据坐标
				 * @returns {SampledPositionProperty|*}
				 */
				function computeFlight(source) {
					// 取样位置 相当于一个集合
					let property = new Cesium.SampledPositionProperty();
					for(let i=0; i<source.length; i++){
						let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
						let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
						// 添加位置，和时间对应
						property.addSample(time, position);
					}
					return property;
				}
				// 暂停飞行
				function stopA(){
					// console.log("++++")
					 // viewer.clock.shouldAnimate = false;
					 // 2
					 viewer.clock.multiplier = 0;
				}
				// 开始飞行
				function startA(){
					viewer.clock.shouldAnimate = true;
				}
				// 前进飞行
				function goA(){
					 viewer.clock.multiplier = 10;
				}
				// 后退飞行
				function backA(){
					 viewer.clock.multiplier = -10;
				}
		

		</script>
    </body>
</html>